<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="227997" data-post-id="227997">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dojap" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dojap
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I got this  <code>No loader is configured for ".png" files: ../priv/static/images/phoenix.png</code></p>
<p>error when I tried your path:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">[info] Running MyBlogWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[info] Access MyBlogWeb.Endpoint at http://localhost:4000
 &gt; css/phoenix.css:629:24: error: No loader is configured for ".png" files: ../priv/static/images/phoenix.png
    629 │   background-image: url("../../priv/static/images/phoenix.png");
        ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

1 error
[watch] build finished, watching for changes...
</code></pre>
<p>Any idea how to solve this?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="227997" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-227997" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="227997"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="227999" data-post-id="227999">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dojap" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dojap
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>OK, I searched a bit and found this: <a href="https://forum.elixirforum.com/t/image-assets-in-css-on-phoenix-1-6-0-rc-0/42262" class="inline-onebox" rel="nofollow">Image assets in CSS on Phoenix 1.6.0-rc.0</a></p>
<p>So, in <code>/config/dev.ex</code> I replaced this line:</p>
<p><code>{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}</code></p>
<p>eith this line:<br>
<code>{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.png=file)]}</code></p>
<p>And, finally, it WORKS!</p>
<p>Now, another problem, how to support .jpg and .gif or all images as well? Because I don’t have only png files I use for background-image in my CSS.</p>
<p>I guess I have to somehow put more image formats in here: <code>--loader:.png=file</code> , right?</p>
<p>Any idea what is the correct format?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="227999" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-227999" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="227999"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="228005" data-post-id="228005">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="bartblast" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/120/17647_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  bartblast
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Hologram</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="dojap" data-post="14" data-topic="42905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/d/958977/48.png" class="avatar"> dojap:</div>
<blockquote>
<p>I guess I have to somehow put more image formats in here: <code>--loader:.png=file</code> , right?<br>
Any idea what is the correct format?</p>
</blockquote>
</aside>
<p>–loader option can be specified multiple times, such as here:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">{Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.png=file --loader:.svg=file)]}
</code></pre>
<p>etc.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228005" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-228005" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228005"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="228006" data-post-id="228006">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dojap" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dojap
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="bartblast" data-post="15" data-topic="42905">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bartblast/48/17647_2.png" class="avatar"> bartblast:</div>
<blockquote>
<p><code>--loader:.png=file --loader:.svg=file</code></p>
</blockquote>
</aside>
<p>Now, I have another problem. It duplicates my file in <code>/priv/static/assets/</code> as <code>phoenix-HEGEN2FR.png</code> but I already have this file in <code>/priv/static/images/</code>.</p>
<p>I don’t want to have duplicit image files and I don’t want to have image file in assets folder where are css and js files.</p>
<p>Perhaps I am dumb, but this is really not user friendly at all. Is Phoenix 1.6 really meant to be used by average people? ;(</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228006" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-228006" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228006"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="228007" data-post-id="228007">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kokolegorille" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/120/4784_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kokolegorille
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You should separate js world from elixir world.</p>
<p>Removing webpack for esbuild is a big change, You need to learn how to use it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228007" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-228007" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228007"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #16"></div>
  </section>
</div>
    <div class="postbit" id="228008" data-post-id="228008">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dojap" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dojap
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>But why doesn’t it support images in CSS? What is the reasoning? Why not set reasonable settings for image files in CSS?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228008" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-228008" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228008"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #17"></div>
  </section>
</div>
    <div class="postbit" id="228009" data-post-id="228009">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kokolegorille" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/120/4784_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kokolegorille
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It does support images… with the appropriate loader.</p>
<p>Like webpack does, it’s similar.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228009" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-228009" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228009"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #18"></div>
  </section>
</div>
    <div class="postbit" id="228010" data-post-id="228010">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="dojap" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  dojap
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That loader, I have no idea what that is, creates a copy of my existing file and put it in the asset folder where my output css and js are. I guess I now have to find a way how to not create a copy and how to not put it in my assets folder again. As I said the image is already in /images I don’t need it have again in /assets .</p>
<p>Now, I have to find out how to do these things.</p>
<p>And I have no idea where to start.</p>
<p>Perhaps it is esbuild thing but the problem is that there are no clear instructions how to make background-image work in CSS file.</p>
<p>For example, it’s so ugly to use</p>
<p><code>background-image: url('../../priv/static/images/blue.png');</code></p>
<p>instead of</p>
<p><code>background-image: url('../images/blue.png');</code></p>
<p>because in the end the image in the browser can be seen like:</p>
<p><a href="http://localhost:4000/images/blue.png" class="onebox" target="_blank" rel="noopener nofollow ugc">http://localhost:4000/images/blue.png</a></p>
<p>etc.</p>
<p>I am sure I can set it somehow to accept a different path in the CSS, but this is so distant and NOT user friendly - at least if there were good docs. But there is almost nothing about how to setup these basic things in Phoenix 1.6.</p>
<p>If I was asking about something complicated, ok, but images in CSS? That’s absolutely basic and it should work out of the box.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228010" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-228010" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228010"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #19"></div>
  </section>
</div>
    <div class="postbit" id="228012" data-post-id="228012">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Maybe this helps: <a href="https://github.com/evanw/esbuild/issues/800#issuecomment-785474004" class="inline-onebox" rel="nofollow">Ignore url() resolving when bundling CSS · Issue #800 · evanw/esbuild · GitHub</a><br>
Imo that should really be the default for things included in css.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228012" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-228012" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228012"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #20"></div>
  </section>
</div>
    <div class="postbit" id="228014" data-post-id="228014">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kokolegorille" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/120/4784_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kokolegorille
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It’s in the esbuild doc…</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://esbuild.github.io/content-types/#external-file">
  <header class="source">
      <img src="https://esbuild.github.io/favicon.svg" class="site-icon" alt="" width="200" height="200">

      <a href="https://esbuild.github.io/content-types/#external-file" target="_blank" rel="noopener nofollow">esbuild.github.io</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://esbuild.github.io/content-types/#external-file" target="_blank" rel="noopener nofollow">External file - esbuild - Content Types</a></h3>

  <p>All of the built-in content types are listed below. Each content type has an associated "loader" which tells esbuild how to interpret the file contents. Some file extensions already have a loader configured for them by default, although the defaults...</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="228014" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/background-image-in-css-not-working-in-phoenix-1-6/42905/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-228014" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="228014"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #21"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/42905/load_more?page=3">Load more posts (23 remaining)</a>
</div></template></turbo-stream>